<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
</head>

<body>
    <div class="container">
        <div class="control">
            <button>选项1</button>
            <button>选项2</button>
            <button>选项3</button>
        </div>
        <div class="content">
            <div class="box">内容1</div>
            <div class="box">内容2</div>
            <div class="box">内容3</div>
        </div>
    </div>

<script>
    function Tabs(elTop, elBot) {
        this.btns = document.querySelector(elTop).children;
        this.contents = document.querySelector(elBot).children;
        this.index = 0;
        this.bindEvent();
        this.change();
    }

    Tabs.prototype.bindEvent = function () {
        let that = this;
        for (let i = 0; i < that.btns.length; i++) {
            that.btns[i].index = i;
            that.btns[i].onclick = function () {
                that.index = this.index;
                that.change();
            }
        }
    }

    Tabs.prototype.change = function () {
        for (let i = 0; i < this.contents.length; i++) {
            this.contents[i].style.display = 'none';
        }
        this.contents[this.index].style.display = 'block';
    }

    let a = new Tabs('.control', '.content');


</script>
</body>

</html>